<script>
import UniPopup from "../uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
import request from "../utils/request"
import audio from "./audio.vue"
import { getShowImage, valIsEmpty } from "../utils"
import vocabularyCollection from "./vocabularyCollection.vue"
import persistence from "@/store/persistence"
import { getNginxUrl } from "@/utils/settings"
export default {
  name: "vocabularyDetail",
  components: { UniPopup, audio, vocabularyCollection },
  data() {
    return {
      queryParams: {
        enWord: "",
        wordId: "",
      },
      details: null,
      isFavorite: false,
      isEmpty: false,
      globalCssVariables: {
        fontSizeRate: 1, //字体大小倍率
      },
    }
  },
  methods: {
		getNginxUrl,
    getShowImage,
    open(enWord, wordId) {
			// 根据单词id查询单词信息
      if (wordId) {
        this.queryParams.wordId = wordId
        this.getWordInfoByWordId()
				//根据单词名称查询单词信息
      } else if (enWord) {
				//检查单词名称是否合法（应该至少包含一个英文字符）
				if (!enWord.match(/[a-zA-Z]/)) {
					return
				}
        this.queryParams.enWord = enWord.replace(/[\s.,?!:;'"()\[\]{}<>\/@#$%^&*\-_=+~`|“”]/g, " ").trim()
        this.getWordInfo()
      } else {
        this.isEmpty = true
      }
      this.$refs.popup.open()
    },
    getWordInfo() {
      this.details = null
      this.isEmpty = false
      request({
        url: "thesaurus/getThesaurusWordByName",
        data: this.queryParams,
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        this.details = data
        if (valIsEmpty(data)) {
          this.isEmpty = true
        }
      })
    },
    getWordInfoByWordId() {
      this.details = null
      this.isEmpty = false
      request({
        url: "thesaurus/getDefinitionByWordId",
        data: this.queryParams,
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        this.details = data
        if (valIsEmpty(data)) {
          this.isEmpty = true
        }
      })
    },
  },
}
</script>

<template>
  <uni-popup ref="popup" type="bottom">
    <view class="popup-content" :style="{ '--font-size-rate': globalCssVariables.fontSizeRate }">
      <view class="content">
        <template v-if="details">
          <view class="title">
            <view class="left">
              <!--				英文单词-->
              <view class="enWord">{{ details.enWord }}</view>
            </view>
            <view class="right">
              <!--						收藏-->
              <vocabularyCollection :word-info="details"></vocabularyCollection>
            </view>
          </view>
          <view class="row">
            <audio :audio-src="details.wordAudioUrl ? getNginxUrl() + details.wordAudioUrl : ''" :text="details.phonetic"></audio>
          </view>
          <!--				中文翻译-->
          <view class="info row">{{ details.znWord }}</view>
          <!--				例句-->
          <view class="enSentence row info">
            <view v-html="details.enSentence"></view>
          </view>
          <!--				图片-->
          <view class="row" v-if="details.imgNotesUrl">
            <image :src="getShowImage(details.imgNotesUrl)"></image>
          </view>
          <view class="divide-line row"></view>
          <!--				解析-->
          <view class="row info" v-if="details.analysis">
            <view v-html="details.analysis"></view>
          </view>
        </template>
        <view class="empty" v-else-if="isEmpty"> 抱歉，该单词尚未录入 </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-content {
  border-radius: 50rpx 50rpx 0 0;
  background: white;
  padding: 50rpx;
  .content {
    max-height: 70vh;
    overflow: auto;
    .empty {
      height: 20vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--text-color-light);
      font-size: calc(34rpx * var(--font-size-rate));
    }
    .row {
      margin-top: 20rpx;
    }
    > .title {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        .enWord {
          font-size: calc(40rpx * var(--font-size-rate));
          font-weight: bold;
          color: var(--text-color-theme);
        }
      }
      .icon {
        width: 60rpx;
        height: 60rpx;
      }
    }
    .divide-line {
      height: 2rpx;
      background: var(--border-color);
    }
    .info {
      font-size: calc(32rpx * var(--font-size-rate));
      line-height: 2;
      &.enSentence {
        color: var(--text-color-light);
      }
    }
  }
}
</style>
